<template>
  <div class="header">
    <!--    <h1>{{ title }}</h1>-->
    <input @input="changeDesc" :value="desc" class="desc" />
    <slot name="title" :slotProps="{ desc }"></slot>
    <div>count: {{ count }}</div>
    <div>name: {{ name }}</div>
    <button @click="changeCount">increment</button>

    <ul>
      <li v-for="item in doneTodos" :key="item">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
import { mapGetters } from "vuex";

/**
 * 使用jsx 编写vDom(虚拟dom节点)
 */
export default {
  props: {
    title: {
      type: String,
      default: "121",
    },
  },
  data() {
    return {
      desc: "1111",
    };
  },
  computed: {
    name() {
      return this.$store.state.moduleA.name;
    },
    // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters(["doneTodos", "count"]),
  },
  mounted() {
    // setTimeout(() => {
    //   this.desc = "woshichengxintuan";
    // }, 1000);

    this.desc = "woshichengxintuan";

    this.$nextTick(() => {
      console.log(document.querySelector(".desc").value);
    });
  },
  methods: {
    changeDesc(e) {
      this.desc = e.target.value;
    },
    changeCount() {
      // this.$store.commit("increment");
      this.$store.dispatch("add", { name: "张三" });
    },
  },
  updated() {
    console.log("updated");
  },
  // render(createElement, context) {
  //   // console.log(this.desc);
  //
  //   return <div className="header">
  //     <h1>{this.title}</h1>
  //     <input onInput={this.changeDesc} value={this.desc} className="desc" />
  //     {/*使用具名插槽(title)*/}
  //     {this.$scopedSlots.title({
  //       desc: this.desc
  //     })}
  //   </div>;
  // }
};
</script>

<style>
.header {
  //color: red;
}
</style>
